import { useState, useEffect } from 'react'
import { Button, Table, Pagination } from 'antd'
import PropType from 'prop-types'
import { fetchList } from '../../../api/index'

/**
 *
 * total:
 * defaultPageSize:
 * current: 当前页
 *
 * onChange
 *
 * 分页接口
 * 1. 刚上来请求一次 （page, size）
 * 2. page变化的时候请求 （page-1,size）
 * 3. size变化的时候请求 （page, size-1）
 * 4. 跳转的时候请求一次 （page-1, size）
 *
 */

const MyPagination = (props) => {
  // useState useRef
  // 当前页码 1
  // const { total = 15 } = props
  const [current, setCurrent] = useState(1)
  const [size, setSize] = useState(5)
  const [total, setTotal] = useState(0)

  const getPageList = async ({ page, size }) => {
    const res = await fetchList({ page, size })
    setTotal(res.data.total)
  }

  useEffect(() => {
    getPageList({ page: current, size })
  }, [current, size])

  return (
    <Pagination
      total={total}
      defaultCurrent={current}
      defaultPageSize={size}
      onChange={(page, pageSize) => {
        console.log(page, pageSize)
        // 设置页码
        setCurrent(page)
      }}
      pageSizeOptions={[5, 10, 15, 20]}
      onShowSizeChange={(current, size) => {
        // 设置条数
        setSize(size)
        console.log('params:', current, size)
      }}
      showSizeChanger
      showQuickJumper
    ></Pagination>
  )
}

MyPagination.propType = {
  total: PropType.number,
}

export default MyPagination
